<!-- Created by mhy on 2018/6/24.

 -->
<template>
    <div class="homepage">
      <section>
        <div class="homepage-sep">
          <p class="homepage-sep-title">素材管理</p>
        </div>
        <div class="homepage-row" @click='routerTo(0,0)' v-if="this.$store.state.userInfo.auth.indexOf('frame') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #B8E986"></div>
          <p class="homepage-row-title">{{section1[0][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
        <div class="homepage-row" @click='routerTo(0,1)' v-if="this.$store.state.userInfo.auth.indexOf('matcard') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #7CDAC6"></div>
          <p class="homepage-row-title">{{section1[1][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
        <div class="homepage-row" @click='routerTo(0,2)' v-if="this.$store.state.userInfo.auth.indexOf('background') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #AAAEFF"></div>
          <p class="homepage-row-title">{{section1[2][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
        <div class="homepage-row" @click='routerTo(0,3)' v-if="this.$store.state.userInfo.auth.indexOf('scene') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #F2B1FF"></div>
          <p class="homepage-row-title">{{section1[3][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
      </section>
      <section>
        <div class="homepage-sep">
          <p class="homepage-sep-title">其他管理</p>
        </div>
        <div class="homepage-row" @click='routerTo(1, 0)' v-if="this.$store.state.userInfo.auth.indexOf('user') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #F8E71C"></div>
          <p class="homepage-row-title">{{section2[0][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
        <div class="homepage-row" @click='routerTo(1, 1)' v-if="this.$store.state.userInfo.auth.indexOf('shop') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #0076FF"></div>
          <p class="homepage-row-title">{{section2[1][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
        <div class="homepage-row" @click='routerTo(1, 2)' v-if="this.$store.state.userInfo.type.indexOf('admin') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #39B866"></div>
          <p class="homepage-row-title">{{section2[2][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>

        <div class="homepage-row" @click='routerTo(1, 3)' v-if="this.$store.state.userInfo.auth.indexOf('factory') > -1">
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #39B866"></div>
          <p class="homepage-row-title">{{section2[3][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>

      </section>
      <section>
        <div class="homepage-sep" style="height: 10pt">
        </div>
        <div class="homepage-row" @click='routerTo(2, 0)'>
          <div class="homepage-row-left">
          <div class="homepage-row-color" style="background-color: #39B866"></div>
          <p class="homepage-row-title">{{section3[0][1]}}</p>
          </div>
          <p class="homepage-row-dist">></p>
        </div>
      </section>
    </div>
</template>

<script>

    export default {
      data() {
          return {
            section1: [['#B8E986','框条库'],['#7CDAC6','卡纸库'],['#AAAEFF','背景库'],['#F2B1FF','场景库']],
            section2: [['#F8E71C','用户'],['#0076FF','商户'],['#39B866','平台管理员'], ['#39B866','厂家管理']],
            section3:[['#39B866','有框装裱管理']]
          }
      },
      mounted(){
        this.$store.state.navTitle = '首页'
      },
      methods: {
        routerTo (section,row){
            switch (section){
              case 0:
                  switch (row){
                    case 0:
                        this.$router.push('/frame/index');
                        break
                    case 1:
                        this.$router.push('/matcard/index');
                       break
                    case 2:
                        this.$router.push('/background/index');
                        break
                    case 3:
                        this.$router.push('/sence/index');
                        break
                    default:
                        break
                  }
                  break
              case 1:
                  switch (row){
                    case 0:
//                      this.$store.state.navTitle = '用户管理'
                      this.$router.push('/user');
                      break;
                    case  1:
                        this.$router.push('/shop');
                        break;
                    case 2:
                      this.$router.push('/plate');
                        break
                    case 3:
                      this.$router.push('/factory/manage');
                        break
                    default:
                        break
                  }
                  break
              case 2:
                  switch (row){
                    case 1:

                      break;
                    default:
                        break
                  }
                  break
              default:
                  break

            }
        }
      }


    }


</script>

<style scoped>
  .homepage-sep{
    width: 100%;
    height: 50pt;
    background-color: #F2F2F2;
  }
  .homepage-sep-title{
    position: absolute;
    margin-left: 20px;
    margin-top: 25pt;
  }

  .homepage-row{
    margin-top: 1px;
    width: 100%;
    height: 60pt;
    /*height: 120px;*/
    display: flex;
    display: -webkit-flex;
    box-shadow: 0pt 0.1pt 0pt #303641;
    align-items: center;
    justify-content: space-between;
    background-color: white;
  }
  .homepage-row-left{
    width: 300pt;
    height: 60pt;
    display: flex;
    display: -webkit-flex;
  }

  .homepage-row-color{
    width: 60pt;
    height: 60pt;
  }
  .homepage-row-title{
    font-size: 17pt;
    height: 60pt;
    line-height: 60pt;
    margin-left: 10pt;
    color: #303641;
  }
  .homepage-row-dist{
    margin-right: 20pt;
  }
</style>
